
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
				 
.animated {
  animation-duration: 2s; /*动画时间*/
  animation-fill-mode: both; /*播放后的状态*/
}
 
.animated {
  animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
 
.animated {
  animation-duration: 2s; /*动画时间*/
}
 
/* .up,.around {
  background: #2D97DB;
  width: 90%;
  height: 90%;
  padding: 20px;
  margin: 20px auto;
  font-family: "微软雅黑";
  font-size: 40px;
  color: white;
  text-align: center;
  line-height: 90%;
} */
/* .around{
	background-color: #44a036;
} */
 
.up{
  animation-name:upAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}
.around{
  animation-name:aroundAnimation; /*动画的名称*/
  transform-origin: center bottom; /*设置动画旋转元素的基点为*/
  cursor: pointer;
}
 
@keyframes upAnimation{
  0%,
  100%,
  20%,
  50%,
  80% {
  transition-timing-function: cubic-bezier(0.215,.61,.355,1); 
  transform: translate3d(0,0,0);
  }
  40%,
  43%{
  transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
  transform: translate3d(0,-30px,0);
  }
  70%{
  transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
  transform: translate3d(0,-15px,0);
  }
  90%{
  transform: translate3d(0,-4px,0);
  }
}
 
@keyframes aroundAnimation{
	0%,20%{
		/* transition-timing-function: cubic-bezier(0.215,.61,.355,1); */
		transform: translate3d(2%,0,0);
	}
	
	10%,30%{
		/* transition-timing-function: cubic-bezier(0.18, 0.76, 0.87, 0.35); */
		transform: translate3d(0%,0,0);
	}
	04%,60%{
		/* transition-timing-function: cubic-bezier(0.215,.61,.355,1); */
		transform: translate3d(1%,0,0);
	}
	50%,70%{
		/* transition-timing-function: cubic-bezier(0.215,.61,.355,1); */
		transform: translate3d(0%,0,0);
	}
	80%{
		 transform: translate3d(1%,0,0);
	}
  90%{
  transform: translate3d(2%,0,0);
  }
  100%{
	  transform: translate3d(0,1,0);
  }
}



@-moz-keyframes tada{
    0%{-moz-transform:scale(1);}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
    40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
    100%{-moz-transform:scale(1) rotate(0);}
   }

  @-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
    40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
    100%{-webkit-transform:scale(1) rotate(0);}}

.doudun:hover{
  -webkit-animation: tada 1s .2s ease both;
  -moz-animation: tada 1s .2s ease both;
}
	</style>
</head>
<body>
	<div class="up animated">上下晃动</div>
	<div class="around animated">左右晃动</div>
	
	<div class="doudun">99</div>
</body>
<script>
	let obj = [ {
              label: "广告标题或者广告图片",
              msg: "可为文字或者图片",
              model: "ontitle",
              type: "imgs"
            },
            {
              label: "广告地址",
              msg: "广告地址路径",
              model: "AdLinkUrl"
            },
            {
              label: "确认按钮",
              msg: "默认为‘确认’按钮，自定义按钮名称",
              model: "oktitle"
            },
            {
              label: "取消按钮",
              msg: "默认为‘取消’按钮自定义按钮名称",
              model: "oncancel "
            },
            {
              label: "点击确认要做的事情",
              msg: "默认为‘打开广告地址’",
              model: "onOKcb"
            },
            {
              label: "点击取消要做的事情",
              msg: "默认为‘关闭当前广告’",
              model: "onOncb"
            }]
	
	
for (let keyname in obj) {
	console.log(obj[keyname])
}
	

let mk = [ "点击取消要做的事情","默认为‘关闭当前广告’","onOncb","*&*","点击取消要做的事情","默认为‘关闭当前广告’","onOncb","*&*","点击取消要做的事情","默认为‘关闭当前广告’","onOncb","*&*","点击取消要做的事情","默认为‘关闭当前广告’","onOncb","*&*"]	



// console.log(mk.toString().split('*&*'))

const model = {model: "ontitle"};

console.log(model)
	
	
</script>
</html>